<template>
  <div>
    <!-- 面包屑导航 -->
    <Breadcrumb :breadcrumbInfo="breadcrumbInfo"></Breadcrumb>
    <!-- 用户列表区 -->
    <el-table
      :data="tableFormInfo.formHead"
      stripe
      border
      highlight-current-row
    >
      <el-table-column width="50" type="index"></el-table-column>
      <el-table-column
        nim-width="280"
        prop="authName"
        label="权限名称"
        align="center"
      >
      </el-table-column>
      <el-table-column width="380" prop="path" label="路径"> </el-table-column>
      <el-table-column width="380" prop="level" label="权限等级" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level === '0'">一级</el-tag>
          <el-tag v-else-if="scope.row.level === '1'" type="success"
            >二级</el-tag
          >
          <el-tag v-else-if="scope.row.level === '2'" type="danger"
            >三级</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 引入面包屑导航组件
import Breadcrumb from "../../components/Breadcrumb.vue";

export default {
  name: "Rights",
  components: { Breadcrumb },
  data() {
    return {
      // 面包屑导航消息
      breadcrumbInfo: {
        titlePath: [
          { title: "首页", Path: "/Home" },
          { title: "权限管理", Path: "" },
          { title: "权限列表", Path: "" },
        ],
      },

      // TableForm表头消息
      tableFormInfo: {
        //权限列表收集
        formHead: [],
        formHead: [
          { title: "权限名称", prop: "authName" },
          { title: "路径", prop: "path" },
          { title: "权限等级", prop: "level" },
        ],
      },
    };
  },

  created() {
    this.$http
      .get("rights/list ")
      .then((result) => {
        if (result.data.meta.status != 200)
          return this.$messge.error(result.data.meta.status);
        this.tableFormInfo.formHead = result.data.data;
      })
      .catch((err) => {
        this.$messge.error(err.data.meta.status);
      });
  },
};
</script>

<style>
</style>